
<script setup>
	import useAudio from '@/common/hooks/useAudio'
	/** props */
	defineProps({
		src: {
			type: String
		}
	});
	
	const { playAudio, isPlayWord, stopAudio } = useAudio()
</script>

<template>
	<view class="items-center relative" style="display: inline-flex; line-height: 1;" @click="playAudio(src)">
		<image :src="`${$imageBaseUrl}trumpet.svg`" class="w-30 h-30 mr-15" />
		<view class="wifi-symbol w-50 h-50 overflow-hidden absolute" style="left: 28rpx;" :class="{ active: isPlayWord }">
			<view class="wifi-circle absolute round-full second w-25 h-25" />
			<view class="wifi-circle absolute round-full third w-40 h-40" />
		</view>
		<slot></slot>
	</view>
</template>


<style scoped lang="scss">
	.wifi-symbol {
	  color: #00c386;
	  margin: 1rpx 0 0 -10rpx;
	     transform: rotate(135deg) translate3d(0, 0, 0) scale(.6);
	 }
	
	.wifi-circle {
	    border: 5rpx solid;
	}
	
	.second {
	    top: 35rpx;
	    left: 35rpx;
	}
	
	.third {
	    top: 25rpx;
	    left: 25rpx;
	}
	
	.active {
		opacity: 0.8;
		
		.second {
			animation: fadeInOut 1s infinite 0.2s;
			-webkit-animation: fadeInOut 1s infinite 0.2s;
		}
	
		.third {
			animation: fadeInOut 1s infinite 0.4s;
			-webkit-animation: fadeInOut 1s infinite 0.4s;
		}
	}
	
	@keyframes fadeInOut {
	    0%{opacity: 0}
	    100%{opacity: 1}
	}
</style>